<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <script th:src="@{/static/jquery.min.js}"></script>
    <script th:src="@{/static/jquery.form.min.js}"></script>
</head>
<body>


<h1>百度云模板识别OCR Demo</h1>

<img id="show" src="" style="width: 300px;height: 100px" >

<input type="hidden" id="path">

<form method="POST" id="formTag1" action="/upload" enctype="multipart/form-data">
    <input type="file" id="file" name="file" /><br/><br/>
</form>
<br>
<button type="button" onclick="submit()" />上传</button>
<br>
<textarea id="text" cols="50" rows="25">

</textarea>
<br>



<button type="button" onclick="Distinguish()" />识别</button>


</body>


<script>

    //上传回显
    function submit() {

        $("#formTag1").ajaxSubmit({
            method : "POST",
            success : function(res){
                if(res.code == 1){
                    alert("上传成功")
                    $("#show").attr("src",res.data);
                    $("#path").val(res.data);
                    
                }else{
                    alert("上传失败");
                }
            },
            error : function(){
                alert("网络错误，请稍后重新尝试！");
            }
        });

    }
    
    //识别
    
    function Distinguish() {

        var path = $("#path").val();

        if (path == null || path == "") {
            alert("请先上传文件")
            return;
        }

        $.ajax({
            url:"/distinguish",
            type:"POST",
            data:{
                path:path
            },
            success:function (res) {
                console.log("识别成功")

                $("#text").val(res.data)
            }

        })


    }


</script>

</html>